<template>
  <div class="portrait">
    <div class="details card">
      <div class="detail mb20">
        <div class="left">
          <div class="img"><img :src="form.avatar" alt="" /></div>
          <div class="right">
            <div class="key">
              {{ form.name || '' }}
              <!-- {{ (form.name || '') + (form.remarkCorpName ? '-' + form.remarkCorpName : '') }} -->
            </div>
            <div class="flex aic">
              <van-icon name="manager" :class="['gender', { 1: 'man', 2: 'woman' }[form.gender]]"></van-icon>
              <span
                :style="{
                  color: form.customerType === 1 ? '#4bde03' : '#f9a90b',
                  'font-size': '12px',
                }"
              >
                {{ { 1: '@微信', 2: '@企业微信' }[form.customerType] }}
              </span>
            </div>
          </div>
        </div>
        <!-- <div @click="usershow = true">
          {{ str }}
          <van-icon name="arrow" />
        </div> -->
        <div type="success">{{ str }}</div>
      </div>
      <div>
        <div class="content-style">
          <span>添加时间：</span>
          <span>{{ form.addTime || '-' }}</span>
        </div>
        <div class="content-style">
          <span>添加方式：</span>
          <span>{{ form.addMethodStr || '-' }}</span>
        </div>
      </div>
      <!-- 社交关系 -->
      <div class="realationship">
        <!-- <div class="detail">
          <div class="title">社交关系</div>
          <div class="data" @click="goRoute('/community')">详情<van-icon name="arrow" /></div>
        </div> -->
        <div class="detail">
          <div class="boxnumber">
            <div class="number" @click="goRoute('/community', 1)" v-if="form.socialConn.addEmployeNum">
              <span>{{ form.socialConn.addEmployeNum }}</span>
            </div>
            <p class="key">跟进员工</p>
          </div>
          <div class="boxnumber">
            <div class="number" v-if="form.socialConn.addGroupNum" @click="goRoute('/community', 2)">
              <span>{{ form.socialConn.addGroupNum }}</span>
            </div>
            <p class="key">所在群聊</p>
          </div>
          <div class="boxnumber">
            <div class="number" v-if="form.socialConn.commonGroupNum" @click="goRoute('/community', 3)">
              <span>{{ form.socialConn.commonGroupNum }}</span>
            </div>
            <p class="key">共同群聊</p>
          </div>
        </div>
      </div>

      <!-- <div class="table">
        <DefineFieldCom
          :detail="true"
          :addressOptions="addressOptions"
          :list="fieldList"
          :baseData="form"
          :key="12"
        ></DefineFieldCom>
        <div
          class="more ac mt15"
          @click="
            detailshow = true
            getAreaList()
          "
        >
          更多详细资料
        </div>
      </div> -->
    </div>
    <!-- 企业标签 -->
    <div class="userlabel card">
      <div class="detail">
        <div class="title">企业标签</div>
        <div class="data" is-link @click="labelEdit()">
          编辑
          <van-icon name="arrow" />
        </div>
      </div>
      <div v-if="form.tags && form.tags.length" class="labelstyle mt15">
        <!-- <template v-if="form.tags.length < 11">
          未超过10个
          <div class="label" v-for="(unit, unique) in form.tags" :key="unique">
            {{ unit.name }}
          </div>
        </template>
        <template v-else>
          <div v-if="tagUp">
            收起
            <div class="label" v-for="(unit, unique) in form.tags.splice(0, 10)" :key="unique">
              {{ unit.name }}
            </div>
            <div class="label" style="color:#07c060" @click="tagUp = false">
              ...展示全部{{ form.tags.length }}个
            </div>
          </div>
          <div v-else>
            展开
            <div class="label" v-for="(unit, unique) in form.tags" :key="unique">
              {{ unit.name }}
            </div>
          </div>
        </template> -->
        <!-- <div class="label" v-for="(unit, unique) in form.tags" :key="unique">
          {{ unit.name }}
        </div> -->
        <TagEllipsis :list="form.tags" :limit="10" />
      </div>
      <Empty v-else style="padding: 0;" />
    </div>

    <!-- 个人标签 -->
    <div class="userlabel card">
      <div class="detail">
        <div class="title">个人标签</div>
        <div class="data" is-link @click="labelEdit('person')">
          编辑
          <van-icon name="arrow" />
        </div>
      </div>
      <div v-if="form.personTags && form.personTags.length" class="labelstyle mt15">
        <div class="label" v-for="(unit, unique) in form.personTags" :key="unique">
          {{ unit.name }}
        </div>
      </div>
      <Empty v-else style="padding: 0;" />
    </div>
    <!-- 资料，轨迹，跟进，订单，tab切换栏 -->
    <div class="addwaiting card" style="min-heigth:200px">
      <van-tabs v-model="active" :color="color" @click="onClick">
        <van-tab title="资料">
          <div class="table">
            <DefineFieldCom
              :detail="true"
              :addressOptions="addressOptions"
              :list="fieldList"
              :baseData="form"
              :key="12"
            ></DefineFieldCom>
            <div
              class="more ac mt15"
              @click="
                detailshow = true
                getAreaList()
              "
            >
              更多详细资料
            </div>
          </div>
        </van-tab>
        <van-tab title="轨迹">
          <!-- 客户轨迹 -->
          <div class="addwaiting card" style="padding-left:0px">
            <div class="detail">
              <van-tabs v-model="query.trajectoryType" @change="refreshTrajectory()" :color="color">
                <van-tab :name="0" title="全部"></van-tab>
                <van-tab :name="1" title="客户动态"></van-tab>
                <van-tab :name="2" title="员工动态"></van-tab>
                <!-- <van-tab :name="4" title="商机阶段"></van-tab> -->
                <van-tab :name="3" title="互动动态"></van-tab>
              </van-tabs>
              <div class="data" is-link @click="sync">同步</div>
            </div>

            <!-- 步骤条 -->
            <StepList ref="stepList" :load="findTrajectory" v-if="active === 1"></StepList>
          </div>
        </van-tab>
        <van-tab title="跟进">
          <StepList ref="stepList" :load="findTrajectory" v-if="active === 2"></StepList>
        </van-tab>
        <van-tab title="订单">
          <van-list v-model="orderLoading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="(item, index) in orderList" :key="index" @click="addOrder(item.id)">
              <div class="order-top">
                <div class="order-left">
                  <van-image width="40" height="40" :src="item.productUrl" />
                  <div style=" margin-left:10px">
                    <div>{{ item.productName }}</div>
                    <div>x {{ item.amount }}</div>
                  </div>
                </div>
                <div class="order-right">
                  <div>{{ item.orderStatus }}</div>
                  <div>¥ {{ item.totalPrice }}</div>
                </div>
              </div>
              <div class="order-buttom">
                <span>{{ item.purchaser }}</span>
                <span>{{ item.orderTime }}</span>
              </div>
            </van-cell>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 按钮  -->
    <div class="cancat-btn" v-if="isMyCustomer">
      <van-button v-if="$route.query && $route.query.id" style="width: 90%;" type="info" round @click="concat">
        联系客户
      </van-button>
      <template v-else>
        <van-button
          type="info"
          round
          @click="
            detailshow = true
            getAreaList()
          "
        >
          编辑资料
        </van-button>
        <van-button type="info" round @click="usershow = true">
          添加跟进
        </van-button>
        <van-button type="info" round @click="addOrder()">
          新增订单
        </van-button>
      </template>
    </div>

    <!--

      以下为各编辑弹窗

      -->
    <!-- 详细资料 -->
    <van-action-sheet v-model="detailshow" title="详细资料">
      <DefineFieldCom
        v-if="detailshow"
        :addressOptions="addressOptions"
        :list="fieldList"
        :baseData="form"
        @success="saveUserInformation"
        :key="21"
      ></DefineFieldCom>
    </van-action-sheet>
    <!--

      跟进状态触发弹出框开始 -->
    <van-action-sheet v-model="usershow" title="跟进记录">
      <!-- 表单 -->
      <van-form @submit="onSubmit">
        <van-field :value="trackState" label="商机阶段" required :rules="[{ required: true, message: '必填项' }]">
          <template #input>
            <van-dropdown-menu active-color="#07c060">
              <van-dropdown-item v-model="trackState" :options="stageList" />
            </van-dropdown-menu>
          </template>
        </van-field>

        <!-- 跟进内容 -->
        <van-field
          v-model="conagency"
          name="跟进内容"
          label="跟进内容"
          placeholder="请输入跟进内容"
          type="textarea"
          required
          class="conagency"
          :rules="[{ required: true, message: '必填项' }]"
        />
        <div class="save-btn">
          <van-button round block size="normal" type="info" native-type="submit">保存</van-button>
        </div>
      </van-form>
    </van-action-sheet>
    <!-- 跟进状态触发弹出框结束 -->

    <!-- 客户标签里的编辑触发弹出框开始 -->
    <van-action-sheet v-model="show" :title="editLabelType === 'person' ? '个人标签' : '客户标签'">
      <!-- 个人标签 -->
      <div class="content">
        <template v-if="editLabelType === 'person'">
          <div class="labelstyle">
            <div
              v-for="(unit, unique) in alllabel"
              :key="unique"
              class="label"
              :class="addTag.some((e) => e.tagId == unit.tagId) && 'active'"
              @click="clickLabel(unit)"
            >
              {{ unit.name }}
            </div>
          </div>
          <div class="add-person-tag ac" @click="showAddTag = true">
            <van-icon class="mr10" name="add-o" />
            添加个人标签
          </div>
        </template>

        <!-- 企业标签 -->
        <template v-else>
          <div v-for="(item, index) in alllabel" :key="index">
            <div class="mb15 mt5 tag-group-name">{{ item.groupName }}</div>
            <div class="labelstyle">
              <div
                v-for="(unit, unique) in item.weTags"
                :key="unique"
                class="label"
                :class="addTag.some((e) => e.tagId == unit.tagId) && 'active'"
                @click="clickLabel(unit)"
              >
                {{ unit.name }}
              </div>
            </div>
          </div>
        </template>

        <Empty v-if="!alllabel || !alllabel.length" />
      </div>
      <div class="save-btn" @click="saveCustomerTag()">
        <van-button type="info" size="normal" block round>
          保存
        </van-button>
      </div>
    </van-action-sheet>

    <!-- "添加个人标签 -->
    <van-dialog
      v-model="showAddTag"
      title="添加标签"
      show-cancel-button
      width="300px"
      :confirm-button-color="color"
      :before-close="submitNewPersonTag"
    >
      <van-form ref="addTagForm" validate-trigger="onChange">
        <van-field
          v-model="newPersonTag"
          maxlength="15"
          placeholder="请输入标签（不超过15字）"
          :rules="[{ required: true, message: '' }]"
          class="conagency"
        />
      </van-form>
    </van-dialog>
    <!-- 客户标签里的编辑触发弹出框结束 -->
  </div>
</template>

<script>
import {
  getCustomerInfo,
  updateWeCustomerInfo,
  getAllTags,
  updateWeCustomerPorTraitTag,
  findAddaddEmployes,
  findAddGroupNum,
  findTrajectory,
  addOrEditWaitHandle,
  addOrUpdatePersonTags,
  sync,
  getFieldFn,
  getOrderList,
} from '@/api/portrait'
import StepList from '@/components/StepList.vue'
import { color } from '@/styles/varibles.less'
import { dateFormat } from '@/utils'
import { getAreaList } from '@/api/common'
import DefineFieldCom from './defineField.vue'
import { getStageList } from '@/api/common'
import TagEllipsis from '@/components/TagEllipsis.vue'

export default {
  components: {
    StepList,
    DefineFieldCom,
    TagEllipsis,
  },
  data() {
    return {
      orderList: [
        // {
        //   id: '1693929304194711552',
        //   productName: 'QP202212081139032000',
        //   productUrl: null,
        //   orderStatus: '待支付',
        //   totalPrice: 5,
        //   purchaser: '4',
        //   orderTime: '2023-08-22',
        // },
        // {
        //   id: '1693931526366543872',
        //   productName: 'QP202212081123155838',
        //   productUrl: null,
        //   orderStatus: '待支付',
        //   totalPrice: 24,
        //   purchaser: '4',
        //   orderTime: '2023-08-22',
        // },
        // {
        //   id: '1694259619920498688',
        //   productName: 'QP202212091107171879',
        //   productUrl:
        //     'https://link-wechat-1251309172.cos.ap-nanjing.myqcloud.com/2022-12-09/t1670555222916-iHg51rzQCuGGJlbj.jpg',
        //   orderStatus: '待支付',
        //   totalPrice: 10,
        //   purchaser: '购买人',
        //   orderTime: '2023-08-23',
        // },
        // {
        //   id: '1694992612381519872',
        //   productName: 'QP202212091130047153',
        //   productUrl:
        //     'https://link-wechat-1251309172.cos.ap-nanjing.myqcloud.com/2022-12-09/t1670556590223-nHIozPxjimkSRy5O.jpg',
        //   orderStatus: '待回款',
        //   totalPrice: 12,
        //   purchaser: '购买人',
        //   orderTime: '2023-08-25',
        // },
        // {
        //   id: '1695002481096486912',
        //   productName: 'QP202212091107171879',
        //   productUrl:
        //     'https://link-wechat-1251309172.cos.ap-nanjing.myqcloud.com/2022-12-09/t1670555222916-iHg51rzQCuGGJlbj.jpg',
        //   orderStatus: '待支付',
        //   totalPrice: 1,
        //   purchaser: '4',
        //   orderTime: '2023-08-25',
        // },
        // {
        //   id: '1695005116734205952',
        //   productName: 'QP202212091130047153',
        //   productUrl:
        //     'https://link-wechat-1251309172.cos.ap-nanjing.myqcloud.com/2022-12-09/t1670556590223-nHIozPxjimkSRy5O.jpg',
        //   orderStatus: '待支付',
        //   totalPrice: 23,
        //   purchaser: '购买人',
        //   orderTime: '2023-08-25',
        // },
        // {
        //   id: '1695005371823386624',
        //   productName: 'QP202212081139032000',
        //   productUrl:
        //     'https://link-wechat-1251309172.cos.ap-nanjing.myqcloud.com/2022-12-13/t1670923192814-dH76ZMSQSyDImiMl.jpg',
        //   orderStatus: '待支付',
        //   totalPrice: 22,
        //   purchaser: '购买人',
        //   orderTime: '2023-08-25',
        // },
        // {
        //   id: '1695328189840715776',
        //   productName: 'QP202212081139032000',
        //   productUrl:
        //     'https://link-wechat-1251309172.cos.ap-nanjing.myqcloud.com/2022-12-13/t1670923192814-dH76ZMSQSyDImiMl.jpg',
        //   orderStatus: '待回款',
        //   totalPrice: 88,
        //   purchaser: '新增',
        //   orderTime: '2023-08-26',
        // },
        // {
        //   id: '1695988020071202816',
        //   productName: 'QP202212081139032000',
        //   productUrl:
        //     'https://link-wechat-1251309172.cos.ap-nanjing.myqcloud.com/2022-12-13/t1670923192814-dH76ZMSQSyDImiMl.jpg',
        //   orderStatus: '待支付',
        //   totalPrice: 6,
        //   purchaser: '购买人',
        //   orderTime: '2023-08-28',
        // },
      ],
      orderObj: { pageNum: 1, pageSize: 5 },
      total: 0,
      fieldList: [],
      color,
      // 客户标签弹出框
      show: false,
      // 跟进状态的弹出框开始
      usershow: false,
      trackState: '', // 跟进状态
      conagency: '', // 跟进内容
      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
      active: 0,
      // 客户轨迹
      // 待办动态
      todonewsshow: false,
      // 接口开始
      externalUserId: '',
      // externalUserId: 'wmiGuBCgAAoCBD1frD3hRplbsXoBLx6g', // 客户IdwmiGuBCgAAoCBD1frD3hRplbsXoBLx6g
      // externalUserId: 'wmiGuBCgAA617zOzAIg-0sZG3Vok7BUA',
      form: {
        name: '', // 昵称
        remarkMobiles: '', // 手机号
        age: '', // 年龄
        birthday: '', // 客户生日
        email: '', // 邮箱
        address: '', // 地址
        qq: '', // qq
        position: '', // 职业
        remarkCorpName: '', // 公司
        otherDescr: '', // 其他描述
        tags: [], // 企业标签合集
        personTags: [], // 个人标签合集
        socialConn: {
          addEmployeNum: '',
          addGroupNum: '',
          commonGroupNum: '',
        },
      },
      alllabel: [], // 标签组
      // 点击测试组标签获取的变量
      groupId: '',
      name: '',
      tagId: '',
      addTag: [], // 添加的参数
      staff: [], // 添加的员工
      groupChat: [], // 添加的群聊
      commonGroup: [], // 共同的群聊
      //   客户轨迹
      query: {
        trajectoryType: null,
      },

      loading: false,
      finished: false,
      orderLoading: false,
      dictTrackState: Object.freeze({
        1: { name: '待跟进', color },
        2: { name: '跟进中', color },
        3: { name: '已成交', color: '#07c160' },
        4: { name: '无意向', color: '#ff976a' },
        5: { name: '已流失', color: '#ee0a24' },
      }),
      editLabelType: '', // 编辑标签类型
      showAddTag: false,
      newPersonTag: '',
      isMyCustomer: false,

      detailshow: false,

      minDate: new Date(1949, 9, 1),
      maxDate: new Date(),
      birthday: new Date(2022, 0, 17),
      // 选项列表，children 代表子选项，支持多级嵌套
      addressOptions: [],
      stageList: [],
      str: '',
      tagUp: true,
    }
  },
  computed: {
    userId() {
      // return process.env.NODE_ENV !== 'development' ? this.$store.state.userId : 'XuXueJun'
      return process.env.NODE_ENV !== 'development' ? this.$route.query?.userId || this.$store.state.userId : 'XuXueJun'
    },
  },
  created() {
    this.getOrderList()
    let query = this.$route.query
    this.externalUserId = process.env.NODE_ENV !== 'development' ? query?.id : 'wmbhUTLgAA6ByLnY45U-uiC4ccoMvwng' // 风居住的街道
    // this.externalUserId = process.env.NODE_ENV !== 'development' ? query && query.id : 'wmbhUTLgAA6ByLnY45U-uiC4ccoMvwng' // 风居住的街道


    this.isMyCustomer = this.userId == this.$store.state.userId
    if (process.env.NODE_ENV === 'production') {
      this.$toast.loading()
      if (this.externalUserId) {
        this.start()
        this.$toast.clear()
      } else {
        this.init()
      }
    } else {
      this.start()
      // this.getAllTags()
    }
  },

  methods: {
    onClick(val) {
      console.log(537, val)
      if (val == 3) {
        this.orderList = []
        this.orderObj.pageNum = 1
        this.getOrderList()
      }
    },
    addOrder(id) {
      this.$router.push({
        name: 'portraitAdd',
        query: {
          id,
          externalUserId: this.externalUserId,
        },
      })
    },
    onLoad() {
      // console.log(552, this.total > this.orderList.length)
      // console.log(553, this.total)
      // console.log(554, this.orderList.length)
      if (this.total > this.orderList.length) {
        this.orderObj.pageNum++
        this.getOrderList()
      } else {
        this.finished = true
      }
    },
    getOrderList() {
      this.orderLoading = true
      this.finished = false
      this.orderObj.userId = this.userId
      this.orderObj.externalUserid = this.externalUserId
      getOrderList(this.orderObj).then((res) => {
        res.rows.forEach((item) => {
          this.orderList.push(item)
        })
        console.log(576, this.orderList)
        this.total = +res.total
        if (this.total <= this.orderList.length) {
          this.finished = true
        }
        this.orderLoading = false
      })
    },
    getStage() {
      getStageList().then((res) => {
        this.stageList = res.data.map((e) => ({ text: e.stageKey, value: e.stageVal }))
        this.stageList.some((e) => e.value == this.form.trackState && (this.str = e.text))
      })
    },
    start() {
      this.getCustomerInfo()
      this.findAddaddEmployes()
      this.findAddGroupNum()
      // this.refreshTrajectory()
      this.getField()
      this.getStage()
    },
    getField() {
      getFieldFn({
        weUserId: this.userId,
        externalUserId: this.externalUserId,
      }).then((res) => {
        this.fieldList = res.data
      })
    },
    init() {
      wx.invoke('getContext', {}, (res) => {
        if (res.err_msg == 'getContext:ok') {
          let entry = res.entry //返回进入H5页面的入口类型，目前有normal、contact_profile、single_chat_tools、group_chat_tools
          if (!['single_chat_tools', 'group_chat_tools', 'contact_profile'].includes(entry)) {
            // this.$toast.clear()
            this.$toast('入口错误：' + entry)
            return
          }
          if (entry === 'group_chat_tools') {
            this.$router.replace('/portraitGroup')
            return
          }
          wx.invoke('getCurExternalContact', {}, (res) => {
            if (res.err_msg == 'getCurExternalContact:ok') {
              this.externalUserId = res.userId //返回当前外部联系人userId
              // 获取客户信息
              this.start()
            } else {
              //错误处理
              this.$dialog({ message: '进入失败：' + JSON.stringify(res) })
            }
            this.$toast.clear()
          })
        } else {
          //错误处理
          this.$toast.clear()
          this.$dialog({ message: '进入失败：' + JSON.stringify(res) })
        }
      })
    },
    getCustomerInfo() {
      // this.$toast('userId:' + this.userId)
      let params = {
        externalUserid: this.externalUserId,
        userId: this.userId,
      }
      getCustomerInfo(params)
        .then(({ data }) => {
          if (data.tagIds && data.tagNames) {
            data.tagIds = data.tagIds.split(',')
            data.tagNames = data.tagNames.split(',')
            data.tags = data.tagIds.map((unit, index) => ({
              tagId: unit,
              name: data.tagNames[index],
            }))
          }

          if (data.personTagIds && data.personTagNames) {
            data.personTagIds = data.personTagIds.split(',')
            data.personTagNames = data.personTagNames.split(',')
            data.personTags = data.personTagIds.map((unit, index) => ({
              tagId: unit,
              name: data.personTagNames[index],
            }))
          }
          this.form = Object.assign(data, params)
          // this.conagency = this.form.trackContent
          this.trackState = this.form.trackState
          this.getStage()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 获取客户添加的员工
    findAddaddEmployes() {
      findAddaddEmployes(this.externalUserId)
        .then(({ data }) => {
          // console.log(data);
          this.staff = data
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 获取用户添加的群
    findAddGroupNum() {
      findAddGroupNum({
        externalUserid: this.externalUserId,
        userId: this.userId,
      })
        .then(({ data }) => {
          this.groupChat = data
          this.commonGroup = this.groupChat.filter((ele) => {
            return ele.groupMemberNum == 1
          })
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //   获取轨迹信息
    findTrajectory(params) {
      if (!this.externalUserId) {
        return new Promise(() => {})
      }
      let query = {
        weUserId: this.userId,
        externalUserid: this.externalUserId,
      }
      Object.assign(query, this.query, params)
      query.trajectoryType == 0 && (query.trajectoryType = null)
      if (this.active === 2) {
        query.trajectoryType = 4
      }
      return findTrajectory(query)
    },
    refreshTrajectory() {
      this.$nextTick(() => {
        this.$refs.stepList.getList(1)
      })
    },
    getAreaList() {
      getAreaList().then(({ data }) => {
        this.addressOptions = data
      })
    },
    getAllTags(type) {
      this.$toast.loading({
        message: 'loading...',
        duration: 0,
        forbidClick: true,
      })
      let params = {
        groupTagType: 1,
      }
      if (type === 'person') {
        params = {
          groupTagType: 3,
          userId: this.userId,
        }
      }
      return getAllTags(params)
        .then(({ data }) => {
          this.alllabel = this.listTagOneArray = data

          if (this.editLabelType !== 'person') {
            this.listTagOneArray = []
            data.forEach((element) => {
              element.weTags.forEach((d) => {
                this.listTagOneArray.push(d)
              })
            })
          }
          this.$toast.clear()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 详细资料保存
    saveUserInformation(data) {
      this.$toast.loading({
        message: 'loading...',
        duration: 0,
        forbidClick: true,
      })
      // this.form.userId = this.userId
      updateWeCustomerInfo(data)
        .then((data) => {
          this.$toast('操作成功')
          this.getCustomerInfo()
          this.detailshow = false
        })
        .catch((err) => {
          console.log(err)
        })
    },

    // 编辑跟进动态
    onSubmit() {
      let form = {
        weUserId: this.userId,
        externalUserid: this.externalUserId,
        trackContent: this.conagency,
        trackState: this.trackState,
      }
      addOrEditWaitHandle(form)
        .then((data) => {
          this.getCustomerInfo()
          this.refreshTrajectory()

          if (data.code == 200) {
            this.$toast.success('保存成功')
            this.usershow = false
            this.conagency = ''
            this.trackState = ''
          }
        })
        .catch((err) => {
          console.log(err)
        })

      //   表单重置
      // this.dateagency = ''
      // this.startTime = ''
      // this.endTime = ''
    },
    // type:1:跟进员工，2：所在群聊，3：共同群聊
    goRoute(path, type) {
      this.$router.push({
        path,
        query: {
          customerId: this.externalUserId,
          type,
        },
      })
    },
    // 点击编辑标签
    async labelEdit(type) {
      this.editLabelType = type
      await this.getAllTags(type)
      this.addTag = []

      let tags = this.form[type === 'person' ? 'personTags' : 'tags']
      let hasErrorTag = [] // 异常活已经删除的标签
      // let repeat = [] // 重复的标签
      tags &&
        tags.forEach((unit) => {
          // 判断是否有重复标签
          // let isRepeat = this.listTagOneArray.some((d) => {
          //   return d.tagId === unit.tagId
          // })
          // // 去重
          // if (isRepeat) {
          //   repeat.push(unit.name)
          //   return
          // }
          let filter = this.listTagOneArray.find((d) => {
            return d.tagId === unit.tagId
          })
          // 如果没有匹配到，则说明该便签处于异常状态，可能已被删除或破坏
          if (!filter) {
            hasErrorTag.push(unit.name)
            return
          }

          this.addTag.push(filter)
        })
      this.show = true
      // 获取用户当前的lable,将当前用户的lable与所有lable进行对比，相同的弹框内蓝色展示
      // 弹框内的标签组选中时蓝色展示
      // 弹框内的子标签与选中时蓝色展示，点击时
    },
    // 点击选择标签
    clickLabel(item) {
      let index = this.addTag.findIndex((e) => {
        return item.tagId == e.tagId
      })
      // 数组里不存在该对象,则添加
      if (index == -1) {
        this.addTag.push({
          groupId: item.groupId,
          name: item.name,
          tagId: item.tagId,
        })
      } else {
        // 数组里存在该对象,则删除
        this.addTag.splice(index, 1)
      }
    },
    // 更新客户画像标签
    saveCustomerTag() {
      //  [{ groupId: this.groupId, name: this.name, tagId: this.tagId }]
      let deleteTag = []
      let tags = this.form[this.editLabelType === 'person' ? 'personTags' : 'tags']
      if (tags && tags.length) {
        tags.forEach((dd) => {
          this.addTag.some((item) => item.tagId == dd.tagId) || deleteTag.push(dd)
        })
      }
      updateWeCustomerPorTraitTag({
        externalUserid: this.externalUserId,
        userId: this.userId,
        isCompanyTag: this.editLabelType !== 'person', //是否是企业标签true是;false:不是
        addTag: this.addTag.map((e) => ({ tagId: e.tagId, name: e.name })),
        removeTag: deleteTag,
      })
        .then((res) => {
          //   console.log(res);
          if (res.code == 200) {
            this.show = false
            //   重新获取客户标签
            this.getCustomerInfo()
            this.$toast.success('保存成功')
          }

          // console.log(123);
        })
        .catch((err) => {
          console.log(err)
        })
    },

    // 添加个人标签
    submitNewPersonTag(action, done) {
      if (action === 'confirm') {
        this.$refs.addTagForm
          .validate()
          .then(() => {
            let params = {
              weTags: [{ name: this.newPersonTag, owner: this.userId }],
            }
            addOrUpdatePersonTags(params)
              .then((res) => {
                this.$toast.success('添加成功')
                this.getAllTags('person')
              })
              .catch((err) => {
                console.log(err)
              })
            done()
          })
          .catch((err) => {
            done(false)
            console.log(err)
          })
      } else {
        done()
      }
    },
    sync() {
      this.$toast.loading({
        message: 'loading...',
        duration: 0,
        forbidClick: true,
      })
      sync(this.userId)
        .then((res) => {
          this.$toast.success('同步成功')
          this.refreshTrajectory()
        })
        .finally(() => {
          this.$toast.clear()
        })
    },
    concat(row) {
      wx.openEnterpriseChat({
        // 注意：userIds和externalUserIds至少选填一个。内部群最多2000人；外部群最多500人；如果有微信联系人，最多40人
        userIds: sessionStorage.userId, //参与会话的企业成员列表，格式为userid1;userid2;...，用分号隔开。
        externalUserIds: this.externalUserId, // 参与会话的外部联系人列表，格式为userId1;userId2;…，用分号隔开。
        groupName: '', // 会话名称。单聊时该参数传入空字符串""即可。
        chatId: '', // 若要打开已有会话，需指定此参数。如果是新建会话，chatId必须为空串
        success: (res) => {
          var chatId = res.chatId //返回当前群聊ID，仅当使用agentConfig注入该接口权限时才返回chatId
          // 回调
        },
        fail: (res) => {
          if (res.errMsg.indexOf('function not exist') > -1) {
            alert('版本过低请升级')
          } else {
            // 企微会自动弹出错误提示
            // this.$dialog({ message: '进入失败：' + JSON.stringify(res) })
          }
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
/deep/.van-tab {
  min-width: 64px;
}
.order-top {
  display: flex;
  justify-content: space-between;
  .order-left {
    display: flex;
  }
}
.order-buttom {
  display: flex;
  justify-content: space-between;
}
.content-style {
  color: #86909c;
  line-height: 24px;
  flex-shrink: 10px;
}
.portrait {
  padding: 0 12px 70px;
  border-top: 9px solid transparent;
  background: linear-gradient(to bottom, #eaf5ff 0%, #fafafa 256px);
  background-origin: border-box;
}
.card {
  background: #ffffff;
  box-shadow: 0px 2px 6px -3px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 14px;
  .title {
    text-align: center;
    font-size: 16px;
    color: #222;
    font-weight: 500;
    line-height: 30px;
  }
}
.header {
  margin: 20px 10px 10px;
  vertical-align: center;
  text-align: center;
}

//  详细资料
.detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
  .key {
    color: #222;
    font-weight: 500;
  }
  .data {
    font-size: 13px;
    color: #999;
  }
  // .van-icon-cross {
  //   color: #999;
  // }
}
.left {
  display: flex;
  align-items: center;
  .img {
    width: 52px;
    height: 52px;
    background-color: #f2f2f2;
    margin-right: 12px;
    border-radius: 6px;
    overflow: hidden;
  }
  .right {
    line-height: 25px;
  }
}
.gender {
  color: #9c9c9c;
}
.man {
  color: @color;
}
.woman {
  color: pink;
}
.table {
  .li {
    line-height: 44px;
    border-bottom: 1px solid #fafafa;
  }
  .more {
    color: @color;
    font-size: 13px;
  }
}

.content {
  max-height: 60vh;
  position: relative;
  padding: 0 16px;
  overflow: auto;

  ::v-deep .van-field__label {
    color: #222;
    font-weight: 500;
    width: 30vw;
  }
  .add-person-tag {
    color: @color;
    font-size: 13px;
    margin: 30px 0;
  }
  .tag-group-name {
    font-size: 14px;
    color: #666;
  }
}
// .van-action-sheet__header {
//   .van-icon-cross {
//     color: #666;
//     font-size: 16px;
//   }
// }
// 客户标签
.labelstyle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  .label {
    display: inline-block;
    min-width: 72px;
    font-size: 13px;
    padding: 4px 5px 3px;
    border-radius: 8px;
    color: #666;
    background: #fafafa;
    text-align: center;
    margin: 0 0 11px 9px;
    line-height: 26px;
  }
  .active {
    background: #ecf5ff;
    color: @color;
  }
}

.save-btn {
  width: 90%;
  margin: 20px auto;
  .van-button {
    height: 40px;
    line-height: 40px;
  }
}

//  社交关系
.boxnumber {
  width: 100%;
  text-align: center;
  margin: 10px 0;
  .key {
    font-size: 12px;
    color: #b5b8c0;
  }
  .number {
    text-align: center;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #07c060;
    line-height: 24px;
    span {
      display: inline-block;
      border-bottom: 2px solid #07c060;
      padding: 3px;
    }
  }
}
.addwaiting {
  .labelstyle {
    .label1 {
      width: 80px;
      margin-bottom: 20px;
      border-radius: 40px;
    }
  }
}

/deep/.conagency {
  line-height: 40px;
  flex-direction: column;
  .van-field__control {
    // background-color: #f2f2f2;
    background-color: #fafafa;
    padding: 0 10px;
    border-radius: 8px;
  }
}

.cancat-btn {
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 15px 0;
  width: 100vw;
  display: flex;
  justify-content: space-evenly;
  border-top: 1px solid #f8f8f8;
  .van-button {
    width: 28%;
    height: 30px;
    line-height: 30px;
  }
}

::v-deep .van-dropdown-menu__bar {
  height: auto;
  box-shadow: none;
}
</style>
